ReactNative(expo) + agoraのプロジェクトでビルドエラーになる時の対処方法。

ReactNative(expo) + agoraのプロジェクトでビルドエラーになる時の対処方法を記載します。

具体的には 'AgoraRtcWrapper/iris_rtc_cxx_api.h' file not found や 'AgoraRtcWrapper/iris_rtc_cxx_api.h' file not found が出た場合の解決方法になります。作業ログのため、プロジェクトを作成したところから記載していきます。

プロジェクトの作成手順はこちらを参考にしました。 Building a Video Calling App Using the Agora SDK on Expo (React Native)

1. expoプロジェクト作成(with typescript)

$ expo init
WARNING: expo-cli has not yet been tested against Node.js v18.12.1.
If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:
* >=12.13.0 <15.0.0 (Maintenance LTS)
* >=16.0.0 <17.0.0 (Active LTS)

Migrate to using:
› npx create-expo-app --template

✔ What would you like to name your app? … my-app
✔ Choose a template: › blank (TypeScript)  same as blank but with TypeScript configuration
✔ Downloaded template.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd my-app
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web

2. expo-dev-clientのインストール

[12/20/22 17:42] $ cd my-app
[12/20/22 17:43]/my-app $ yarn add expo-dev-client
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ expo-dev-client@2.0.1
info All dependencies
├─ expo-dev-client@2.0.1
├─ expo-dev-launcher@2.0.2
├─ expo-json-utils@0.4.0
├─ expo-manifests@0.4.0
└─ expo-updates-interface@0.8.1
✨  Done in 3.09s.

3. 必要なagoraのライブラリをインストール

[12/20/22 17:43]/my-app $ yarn add react-native-agora agora-react-native-rtm
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ agora-react-native-rtm@1.5.1
└─ react-native-agora@4.0.0
info All dependencies
├─ agora-react-native-rtm@1.5.1
├─ buffer@6.0.3
└─ react-native-agora@4.0.0
✨  Done in 2.95s.

[12/20/22 17:43]/my-app $ yarn add agora-rn-uikit
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning " > agora-rn-uikit@4.0.2" has incorrect peer dependency "react-native-agora@^3.7.1".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ agora-rn-uikit@4.0.2
info All dependencies
└─ agora-rn-uikit@4.0.2
✨  Done in 1.40s.

4. App.tsxを更新

import 'expo-dev-client';
import React, {useState} from 'react';
import AgoraUIKit, {AgoraUIKitProps} from 'agora-rn-uikit';

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
  const props: AgoraUIKitProps = {
    connectionData: {
      appId: '<Agora App ID>',
      channel: 'test',
    },
    rtcCallbacks: {
      EndCall: () => setVideoCall(false),
    },
  };

  return videoCall ? (
    <AgoraUIKit connectionData={props.connectionData} rtcCallbacks={props.rtcCallbacks} />
  ) : null;
};

export default App;

5. expo run:iosを実行

[12/20/22 17:43]/my-app $ expo run:ios
WARNING: expo-cli has not yet been tested against Node.js v18.12.1.
If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:
* >=12.13.0 <15.0.0 (Maintenance LTS)
* >=16.0.0 <17.0.0 (Active LTS)

This command is being executed with the global Expo CLI. Learn more.
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo run:ios

📝  iOS Bundle Identifier Learn more.

✔ What would you like your iOS bundle identifier to be? … com.hira.my-app
✔ Created native project
✔ Added Metro config
✔ Updated package.json and added index.js entry point for iOS and Android
› Removed "main": "node_modules/expo/AppEntry.js" from package.json because we recommend using index.js as main instead

🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies 3612ms
Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

✔ Config synced
✔ Installed pods and initialized Xcode workspace.
› Planning build
› Executing agora-react-native-rtm Pods/AgoraRtm_iOS » [CP] Copy XCFrameworks
› Executing react-native-agora Pods/AgoraRtcEngine_Special_iOS » [CP] Copy XCFrameworks
› Compiling react-native Pods/glog » utilities.cc
› Compiling react-native Pods/glog » vlog_is_on.cc
› Compiling react-native Pods/glog » symbolize.cc
› Compiling react-native Pods/glog » signalhandler.cc
› Compiling react-native Pods/glog » raw_logging.cc
› Compiling react-native Pods/glog » logging.cc
› Compiling react-native Pods/glog » glog-dummy.m
› Compiling react-native Pods/glog » demangle.cc
› Executing react-native-agora Pods/AgoraIrisRTC_iOS » [CP] Copy XCFrameworks
    [CP] AgoraRtcWrapper.xcframework: Unable to find matching slice in 'ios-arm64_armv7 ios-x86_64-simulator' for the current build architectures (arm64) and platform (-iphonesimulator).
› Compiling react-native Pods/fmt » format.cc
› Compiling react-native Pods/fmt » fmt-dummy.m
› Preparing Pods/expo-dev-menu-EXDevMenu » ResourceBundle-EXDevMenu-expo-dev-menu-Info.plist
› Copying   expo-dev-menu/EXDevMenu.bundle/MaterialCommunityIcons.ttf ➜ node_modules/expo-dev-menu/assets/MaterialCommunityIcons.ttf
› Copying   expo-dev-menu/EXDevMenu.bundle/Ionicons.ttf ➜ node_modules/expo-dev-menu/assets/Ionicons.ttf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Thin.otf ➜ node_modules/expo-dev-menu/assets/Inter-Thin.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-SemiBold.otf ➜ node_modules/expo-dev-menu/assets/Inter-SemiBold.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Regular.otf ➜ node_modules/expo-dev-menu/assets/Inter-Regular.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Medium.otf ➜ node_modules/expo-dev-menu/assets/Inter-Medium.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Light.otf ➜ node_modules/expo-dev-menu/assets/Inter-Light.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-ExtraLight.otf ➜ node_modules/expo-dev-menu/assets/Inter-ExtraLight.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-ExtraBold.otf ➜ node_modules/expo-dev-menu/assets/Inter-ExtraBold.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Bold.otf ➜ node_modules/expo-dev-menu/assets/Inter-Bold.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/Inter-Black.otf ➜ node_modules/expo-dev-menu/assets/Inter-Black.otf
› Copying   expo-dev-menu/EXDevMenu.bundle/EXDevMenuApp.ios.js ➜ node_modules/expo-dev-menu/assets/EXDevMenuApp.ios.js
› Copying   expo-dev-launcher/EXDevLauncher.bundle/main.jsbundle ➜ node_modules/expo-dev-launcher/ios/main.jsbundle
› Compiling expo-dev-launcher Pods/expo-dev-launcher-EXDevLauncher » EXDevLauncherErrorView.storyboard
› Compiling react-native Pods/Yoga » log.cpp
› Compiling react-native Pods/Yoga » experiments.cpp
› Creating  Pods/expo-dev-menu-EXDevMenu » EXDevMenu.bundle
› Compiling react-native Pods/Yoga » event.cpp
› Compiling react-native Pods/Yoga » Yoga.cpp
› Compiling react-native Pods/Yoga » Yoga-dummy.m
› Compiling agora-react-native-rtm Pods/agora-react-native-rtm » agora-react-native-rtm-dummy.m
› Compiling agora-react-native-rtm Pods/agora-react-native-rtm » Extensions.m
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuScreenItem.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuExtensionProtocol.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuGroup.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuAction.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuBridgeProtocol.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuDataSource.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuExportedCallable.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuManagerProtocol.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuScreen.swift
› Packaging react-native Pods/glog » libglog.a
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuItem.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuItemsContainer.swift
› Packaging react-native Pods/fmt » libfmt.a
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuSelectionList.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » expo-dev-menu-interface-dummy.m
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuUIResponderExtensionProtocol.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuItemsContainerProtocol.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » DevMenuLink.swift
› Compiling expo-dev-menu-interface Pods/expo-dev-menu-interface » EXDevExtensions.swift
› Compiling agora-react-native-rtm Pods/agora-react-native-rtm » AgoraRTM.m
› Compiling react-native Pods/Yoga » YGValue.cpp
› Compiling react-native Pods/Yoga » YGStyle.cpp
› Compiling react-native Pods/Yoga » YGNodePrint.cpp
› Compiling react-native Pods/Yoga » YGNode.cpp
› Compiling react-native Pods/Yoga » YGLayout.cpp
› Compiling react-native Pods/Yoga » YGEnums.cpp
› Compiling react-native Pods/Yoga » YGConfig.cpp
› Compiling react-native Pods/Yoga » Utils.cpp
› Compiling react-native Pods/React-perflogger » React-perflogger-dummy.m
› Compiling react-native Pods/React-perflogger » BridgeNativeModulePerfLogger.cpp
› Compiling react-native Pods/React-logger » react_native_log.cpp
› Compiling react-native Pods/React-logger » React-logger-dummy.m
› Compiling react-native Pods/ReactCommon » TurboModuleUtils.cpp
› Compiling react-native Pods/ReactCommon » TurboModulePerfLogger.cpp
› Packaging react-native Pods/Yoga » libYoga.a
› Compiling react-native Pods/ReactCommon » TurboModuleBinding.cpp
› Compiling react-native Pods/ReactCommon » TurboModule.cpp
› Packaging react-native Pods/React-perflogger » libReact-perflogger.a
› Compiling react-native Pods/ReactCommon » TurboCxxModule.cpp
› Packaging expo-dev-menu-interface Pods/expo-dev-menu-interface » libexpo-dev-menu-interface.a
› Compiling react-native Pods/ReactCommon » ReactCommon-dummy.m
› Executing expo-dev-menu-interface Pods/expo-dev-menu-interface » Copy generated compatibility header
› Packaging react-native Pods/React-logger » libReact-logger.a
› Compiling react-native Pods/ReactCommon » RCTTurboModuleManager.mm
› Compiling react-native Pods/ReactCommon » RCTTurboModule.mm
› Compiling react-native Pods/ReactCommon » RCTBlockGuard.mm
› Compiling react-native Pods/React-jsinspector » React-jsinspector-dummy.m
› Compiling react-native Pods/React-jsinspector » InspectorInterfaces.cpp
› Compiling react-native Pods/React-jsiexecutor » React-jsiexecutor-dummy.m
› Compiling react-native Pods/React-jsiexecutor » JSINativeModules.cpp
› Compiling react-native Pods/React-jsiexecutor » JSIExecutor.cpp
› Packaging react-native Pods/React-jsinspector » libReact-jsinspector.a
› Compiling react-native Pods/React-jsi » jsilib-windows.cpp
› Compiling react-native Pods/React-jsi » jsilib-posix.cpp
› Compiling react-native Pods/React-jsi » jsi.cpp
› Compiling react-native Pods/React-jsi » React-jsi-dummy.m
› Compiling react-native Pods/React-jsi » JSIDynamic.cpp
› Compiling react-native Pods/React-jsi » JSCRuntime.cpp
› Compiling react-native Pods/React-cxxreact » ReactMarker.cpp
› Compiling react-native Pods/React-cxxreact » React-cxxreact-dummy.m
› Compiling react-native Pods/React-cxxreact » RAMBundleRegistry.cpp
› Compiling react-native Pods/React-cxxreact » NativeToJsBridge.cpp
› Compiling react-native Pods/React-cxxreact » ModuleRegistry.cpp
› Compiling react-native Pods/React-cxxreact » MethodCall.cpp
› Compiling react-native Pods/React-cxxreact » JSIndexedRAMBundle.cpp
› Compiling react-native Pods/React-cxxreact » JSExecutor.cpp
› Compiling react-native Pods/React-cxxreact » JSBundleType.cpp
› Compiling react-native Pods/React-cxxreact » JSBigString.cpp
› Compiling react-native Pods/React-cxxreact » Instance.cpp
› Compiling react-native Pods/React-cxxreact » CxxNativeModule.cpp
› Compiling react-native Pods/React-bridging » React-bridging-dummy.m
› Compiling react-native Pods/React-bridging » LongLivedObject.cpp
› Preparing react-native Pods/React-Core-AccessibilityResources » ResourceBundle-AccessibilityResources-React-Core-Info.plist
› Copying   react-native React-Core/AccessibilityResources.bundle/en.lproj ➜ node_modules/react-native/React/AccessibilityResources/en.lproj
› Compiling react-native Pods/React-RCTText » React-RCTText-dummy.m
› Compiling react-native Pods/React-RCTText » RCTVirtualTextViewManager.m
› Compiling react-native Pods/React-RCTText » RCTVirtualTextShadowView.m
› Compiling react-native Pods/React-RCTText » RCTUITextView.m
› Compiling react-native Pods/React-RCTText » RCTUITextField.m
› Compiling react-native Pods/React-RCTText » RCTTextViewManager.m
› Compiling react-native Pods/React-RCTText » RCTTextView.m
› Compiling react-native Pods/React-RCTText » RCTTextShadowView.m
› Compiling react-native Pods/React-RCTText » RCTTextSelection.m
› Compiling react-native Pods/React-RCTText » RCTTextAttributes.m
› Compiling react-native Pods/React-RCTText » RCTSinglelineTextInputViewManager.m
› Compiling react-native Pods/React-RCTText » RCTSinglelineTextInputView.m
› Compiling react-native-agora Pods/react-native-agora » react-native-agora-dummy.m
› Compiling react-native-agora Pods/react-native-agora » ReactNativeAgoraRtcNg.mm

❌  (/my-app/node_modules/react-native-agora/ios/ReactNativeAgoraRtcNg.h:1:9)

> 1 | #import <AgoraRtcWrapper/iris_rtc_cxx_api.h>
    |         ^ 'AgoraRtcWrapper/iris_rtc_cxx_api.h' file not found
  2 | #import <React/RCTBridgeModule.h>
  3 | #import <React/RCTEventEmitter.h>
  4 |

› Compiling react-native-agora Pods/react-native-agora » AgoraRtcSurfaceViewManager.mm

❌  (/my-app/node_modules/react-native-agora/ios/ReactNativeAgoraRtcNg.h:1:9)

> 1 | #import <AgoraRtcWrapper/iris_rtc_cxx_api.h>
    |         ^ 'AgoraRtcWrapper/iris_rtc_cxx_api.h' file not found
  2 | #import <React/RCTBridgeModule.h>
  3 | #import <React/RCTEventEmitter.h>
  4 |

› Compiling react-native Pods/React-RCTText » RCTRawTextViewManager.m
› Compiling react-native Pods/React-RCTText » RCTRawTextShadowView.m
› Compiling react-native Pods/React-RCTText » RCTMultilineTextInputViewManager.m
› Compiling react-native Pods/React-RCTText » RCTMultilineTextInputView.m
› Compiling react-native Pods/React-RCTText » RCTInputAccessoryViewManager.m
› Compiling react-native Pods/React-RCTText » RCTInputAccessoryViewContent.m
› Compiling react-native Pods/React-RCTText » RCTInputAccessoryView.m
› Compiling react-native Pods/React-RCTText » RCTInputAccessoryShadowView.m
› Compiling react-native Pods/React-RCTText » RCTConvert+Text.m
› Compiling react-native Pods/React-RCTText » RCTBaseTextViewManager.m
› Compiling react-native Pods/React-RCTText » RCTBaseTextShadowView.m
› Compiling react-native Pods/React-RCTText » RCTBaseTextInputViewManager.m
› Compiling react-native Pods/React-RCTText » RCTBaseTextInputView.m
› Compiling react-native Pods/React-RCTText » RCTBaseTextInputShadowView.m
› Compiling react-native Pods/React-RCTText » RCTBackedTextInputDelegateAdapter.m
› Compiling react-native Pods/React-RCTText » NSTextStorage+FontScaling.m
› Creating  react-native Pods/React-Core-AccessibilityResources » AccessibilityResources.bundle
› Compiling react-native Pods/React-Core » UIView+React.m
› Compiling react-native Pods/React-Core » React-Core-dummy.m
› Compiling react-native Pods/React-Core » RCTWrapperViewController.m
› Compiling react-native Pods/React-Core » RCTWeakProxy.m
› Compiling react-native Pods/React-Core » RCTViewUtils.m
› Compiling react-native Pods/React-Core » RCTViewRegistry.m
› Compiling react-native Pods/React-Core » RCTViewManager.m
    Run script build phase '[CP-User] Generate app.config for prebuilt Constants.manifest' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'EXConstants' from project 'Pods')
    Run script build phase 'Start Packager' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'myapp' from project 'myapp')
    Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'myapp' from project 'myapp')

› 2 error(s), and 4 warning(s)

Failed to build iOS project. "xcodebuild" exited with error code 65.

ビルドに失敗しました。

解決策

色々調べていると最新のreact-native-agoraのバージョン 4.0.0 にバグ？があり、ビルドに失敗しているとのことでした。そこで、ライブラリのバージョンを変えます。今回はビルド成功できたと報告があった 4.1.0-rc.1 に更新しました。

$ yarn add react-native-agora@4.1.0-rc.1

再度run:iosを実行して、ビルドできました。